{% extends "base.html" %}

{% block title %}Online Rec. P.533-13 Propagation Prediction{% endblock %}

{% block head %}
  {{ super() }}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
  <meta name="description" content="Online HF propagation prediction using the ITU Recommendation P.533-13 Propagation Prediction Application.">
{% endblock %}

{% block page_content %}
<div id="ajax-spinner" style="display:none"></div>
<div class="container" style="max-width: 970px;">
	<div class="page-header">
		<h1>Proppy <small>HF Circuit Prediction: Area</small></h1>
	</div>
  <div id="plot-div"><!-- Plotly chart will be drawn inside this DIV --></div>
	<form class="form-horizontal" role="form" method="post" id="parameters_form" action = "{{ url_for('ajax.areapredicttest') }}" enctype="multipart/form-data">

    <div class="row">
      <div class="col-sm-6">
        <fieldset>
          <legend>System</legend>
          <input type="hidden" name="hour" />
          <input type="hidden" name="month" />
          <input type="hidden" name="year" />
          <div class='row'>
            <div class="form-group">
              <div class="col-sm-3">
                {{ form.sys_plot_type.label(class="control-label")}}
              </div>
              <div class="col-sm-9">
                {{ form.sys_plot_type(class="form-control") }}
              </div>
            </div>
          </div>

          <div class='row'>
            <div class="form-group">
              <div class="col-sm-3">
                <label class="control-label">Date / Time</label>
              </div>
              <div class="col-sm-9">
                <div class='input-group date' id='datetimepicker'>
                  <input type='text' class="form-control" name="date", required=true/>
                  <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class='row'>
            <div class="form-group">
              <div class="col-sm-3">
                {{ form.sys_traffic.label(class="control-label")}}
              </div>
              <div class="col-sm-9">
                {{ form.sys_traffic(class="form-control", type="text") }}
              </div>
            </div>
          </div>

          <div class='row'>
            <div class="form-group">
              <div class="col-sm-3">
                {{ form.sys_freq.label(class="control-label")}}
              </div>
              <div class="col-sm-5">
                {{ form.sys_freq(class="form-control", type="number", value="10.0", min="2.0", max="30.0", step="0.05", required=true) }}
              </div>
            </div>
          </div>

          <div class='row'>
            <div class="form-group">
              <div class="col-sm-3">
                {{ form.sys_pwr.label(class="control-label")}}
              </div>
              <div class="col-sm-5">
               {{ form.sys_pwr(class="form-control", type="number", min="1", max="1000000000", step="1", value="100.0", required=true) }}
              </div>
            </div>
          </div> <!-- end of row -->
        </fieldset>
      </div>

      <!-- tx params -->
      <div class="col-sm-6">
        <fieldset>
          <legend>Tx. Site</legend>

          <div class="row">
            <div class="form-group">
              <div class="col-sm-3">
                {{ form.tx_name.label(class="control-label") }}
              </div>
              <div class="col-sm-9">
                {{ form.tx_name(class="form-control", type="text") }}
              </div>
            </div>
          </div>

          <div class="row">
            <div class="form-group">
              <div class="col-sm-3">
                {{ form.tx_lat.label(class="control-label")}}
              </div>
              <div class="col-sm-5">
                {{ form.tx_lat(class="form-control", id="lat-field", type="number", min="-90.0", max="90.0", step="any", required=true) }}
              </div>
              <div class="col-sm-1">
                <button id="geolocation-button" type="button" class="btn btn-primary">
                  <span class="glyphicon glyphicon-map-marker" aria-hidden="true" aria-label"Geo"></span>
                </button>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="form-group">
              <div class="col-sm-3">
                {{ form.tx_lon.label(class="control-label")}}
              </div>
              <div class="col-sm-5">
                {{ form.tx_lon(class="form-control", id="lon-field", type="number", min="-180.0", max="180.0", step="any", required=true) }}
              </div>
            </div>
          </div>

          <div class="row">
            <div class="form-group">
              <div class="col-sm-3">
                {{ form.tx_gain.label(class="control-label")}}
              </div>
              <div class="col-sm-5">
                {{ form.tx_gain(class="form-control", type="number", min="0", max="20.0", step="0.01", value="2.16", required=true) }}
              </div>
            </div>
          </div>

        </fieldset>
      </div> <!-- end of tx params -->
    </div> <!-- end of input params row -->

    <div class="row">
      <div class="form-group">
         <div class="col-sm-1">
           <input id="submit" name="submit" class="btn btn-default" type="submit" value="Submit"/>
         </div>
      </div>
    </div>

	</form>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<script>
  $('#geolocation-button').on('click', function (e) {
    navigator.geolocation.getCurrentPosition(showPosition);
  })

  function showPosition(position) {
    document.getElementById("lat-field").value = position.coords.latitude;
    document.getElementById("lon-field").value = position.coords.longitude;
  }

  $(function () {
    //var dateNow = new Date.();
    var date = new Date();
    var dateNow = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
    $('#datetimepicker').datetimepicker({
      format: 'HH:00UTC MMM YYYY',
      minDate : moment("{{min_year}} {{min_month}}", "YYYY MM"),
      maxDate : moment("{{max_year}} {{max_month}}", "YYYY MM"),
      defaultDate:dateNow
    });
  });

  $(document)
  .ajaxStart(function(){
      $("#ajax-spinner").show();
  })
  .ajaxStop(function(){
      $("#ajax-spinner").hide();
  });


  $( '#parameters_form' ).submit( function( e ) {
    do_prediction(e.target);
    e.preventDefault();
  });


  function do_prediction(form) {
  	var form_obj = form;
    var dt = $("#datetimepicker").data("DateTimePicker").date();
    $("input[name='hour']").replaceWith(
      $('<input>').attr({
        type: 'hidden',
        name: 'hour',
        value: dt.format("H")
      })
    );
    $("input[name='month']").replaceWith(
      $('<input>').attr({
        type: 'hidden',
        name: 'month',
        value: dt.format("M")
      })
    );
    $("input[name='year']").replaceWith(
      $('<input>').attr({
        type: 'hidden',
        name: 'year',
        value: dt.format("YYYY")
      })
    );
    var form_url = $(form_obj).attr("action");
  	var form_data = new FormData(form);
  	$.ajax( {
  		url: form_url,
  		type: 'POST',
  		data: form_data,
      dataType: "json",
  		mimeType: "multipart/form-data",
  		processData: false,
  		contentType: false,
  		success: function(result) {
        /*
        var layout = {
          xaxis: {
            title: 'Time (UTC)',
            range: [-180, 180],
          },
          yaxis: {
            title: 'Frequency / MHz',
            range: [-90, 90],
          },
          margin: {
            l: 50,
            r: 50,
            b: 50,
            t: 50,
            pad: 4
          },
        };
        */

        var data = {
          type: 'scattergeo',
          lat: [ 40.7127, 51.5072 ],
          lon: [ -74.0059, 0.1275 ],
          mode: 'lines',
          line:{
              width: 2,
              color: 'blue'
          }
        };

        var layout = {
          //title: 'London to NYC Great Circle',
          showlegend: false,
          geo: {
              resolution: 10,
              showland: true,
              landcolor: 'rgb(204, 204, 204)',
              projection: {
                type: 'equirectangular'
              },
              coastlinewidth: 1,
              lataxis: {
                range: [ -90, 90 ],
                showgrid: false
              },
              lonaxis:{
                range: [-180, 180],
                showgrid: false
              }
            }
        };
        Plotly.newPlot('plot-div', [data], layout);
        //Plotly.newPlot('plot-div', [result['p']], layout);
      },
  	  error: function(result) {
  			ajax_complete_msg = "Error";
  			console.log('ERRORS: ' + result);
  		},
  	});
  }
</script>
{% endblock %}
